<script lang="ts" setup>
defineOptions({
  name: 'OpenGeneralCard',
});

const props = defineProps({
  title: {
    type: String,
    default: undefined,
  },
});
</script>

<template>
  <ACard class="open-general-card" :title="`${props.title === '' ? '' : (props.title || $route.meta.title)}`">
    <slot></slot>
  </ACard>
</template>

<style lang="scss" scoped>
.open-general-card {
  border: none;
  border-radius: 4px;

  :deep() {
    & > .arco-card-header {
      height: auto;
      padding: 20px;
      border: none;
    }

    & > .arco-card-body {
      padding: 0 20px 20px 20px;
    }
  }
}
</style>
